import React from 'react'
import { Modal, Input, Form } from 'antd'
import regExp from '@/constants/regExp'

const WhiteListAddModal = (props) => {

  const { getFieldDecorator } = props.form

  const { isAddModalShow, addButtonLoading, onChangeAddPhone, onAddModalSure, onAddModalCancel } = props
  return (
    <Modal
      visible={isAddModalShow}
      title="手动添加"
      onOk={() => props.form.validateFields((error) => !error && onAddModalSure()) }
      onCancel={onAddModalCancel}
      confirmLoading={addButtonLoading}
    >
      <Form.Item label="手机号码" required labelCol={{span: 4}} wrapperCol={{span: 18}}>
        {getFieldDecorator('addPhone', {
          rules: [{ required: true, message: '请输入手机号!' },{ message: '手机号格式不正确!', pattern: regExp.phone }],
        })(
          <Input onChange={onChangeAddPhone} />
        )}
      </Form.Item>
    </Modal>
  )
}

export default Form.create({
  mapPropsToFields(props) {
    return {
      addPhone: Form.createFormField({ value: props.addPhone })
    }
  }
})(WhiteListAddModal)